<template>
    <div class="login-wrapper">
        <div class="login-box">
            <span class="title">口令登录</span>
            <el-form
                size="large"
                class="login-content-form"
                :model="formData"
                :rules="rules"
                ref="formRef"
                label-width="80px"
            >
                <el-form-item prop="username" label="用户名：">
                    <el-input
                        type="text"
                        placeholder="请输入 “user” or “admin” "
                        v-model.trim="formData.username"
                        clearable
                        autocomplete="off"
                        @keyup.enter.native="clickLogin"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    prop="password"
                    label="密码："
                    class="password-box"
                >
                    <el-input
                        :type="isShowPassword ? 'text' : 'password'"
                        placeholder="密码"
                        v-model.trim="formData.password"
                        autocomplete="off"
                        @keyup.enter.native="clickLogin"
                    >
                    </el-input>
                    <div
                        class="view-icon"
                        @click="isShowPassword = !isShowPassword"
                    >
                        <el-icon v-if="isShowPassword">
                            <View />
                        </el-icon>
                        <el-icon v-else>
                            <Hide />
                        </el-icon>
                    </div>
                </el-form-item>
                <el-form-item class="login-btn-wrapper">
                    <el-button
                        type="primary"
                        class="login-content-submit"
                        @click="clickLogin"
                    >
                        <span>登录</span>
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="tips">
                出于安全考虑，一旦您访问过那些需要您提供凭证信息的应用时，请操作之后登出并关闭浏览器
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { View, Hide } from "@element-plus/icons-vue";
import { useUserStore, usePermissionStore } from "@/stores/index.ts";
import { useRouter } from "vue-router";
import { getLoginApi } from "@/api/loginApi/index.ts";
const userStoreData = useUserStore();
const permissionStoreData = usePermissionStore();
const router = useRouter();
const formData = ref({
    username: "",
    password: "",
});
const rules = ref({
    username: [
        {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
        },
    ],
});
const formRef = ref();
const isShowPassword = ref(false);
const clickLogin = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            console.log("登录成功");
            const { username, password } = formData.value;
            getLoginApi({ username, password })
                .then((res) => {
                    if (res.code == 200) {
                        const { userInfo, token } = res.data;
                        const { roleList, currentRole } = userInfo;
                        localStorage.setItem("ACCESS_TOKEN", token);
                        userStoreData.setRoles(roleList);
                        userStoreData.setCurrentRole(currentRole);
                        localStorage.setItem("CURRENT_ROLE", currentRole);
                        permissionStoreData.getMenus(currentRole).then(() => {
                            setTimeout(() => {
                                router.push({ path: "/" });
                            }, 500);
                        });
                    } else {
                        ElMessage.error("用户名错误");
                    }
                })
                .catch(() => {});
        }
    });
};
</script>

<style lang="scss" scoped>
.login-wrapper {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/imgs/login/login-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.login-box {
    width: 400px;
    height: 404px;
    position: absolute;
    top: 24%;
    right: 16%;
    padding: 30px 30px 20px 30px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    .title {
        display: inline-block;
        margin-bottom: 36px;
        border-bottom: 2px solid #2d86ed;
        padding-bottom: 8px;
        letter-spacing: 1px;
        font-weight: 500;
        font-size: 24px;
        color: #2d82ed;
    }
    .login-content-submit {
        width: 100%;
    }
    .el-form-item {
        margin-bottom: 42px;
    }
    .login-btn-wrapper {
        margin-bottom: 15px;
    }
    .tips {
        display: flex;
        color: #8b8d95;
    }
    .password-box {
        position: relative;
        .view-icon {
            width: 20px;
            position: absolute;
            top: 0;
            right: 0;
        }
        :deep(.el-input__inner) {
            padding-right: 20px !important;
        }
    }
}
</style>
<style lang="scss">
.login-btn-wrapper {
    .el-form-item__content {
        margin-left: 10px !important;
    }
}
</style>
